<template>
  <div style="width:15%;margin:0 auto">
    <div class="upDiv">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          {{ assignName }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="0">未分配</el-dropdown-item>
          <el-dropdown-item command="1">已分配</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-button type="text">质控计划</el-button>
      <el-input
        size="small"
        clearable
        v-model="search"
        placeholder="请输入搜索内容"
        @keyup.enter.native="filterName"
      ></el-input>
    </div>

    <el-dialog title="任务分配" :visible.sync="dialogVisible" width="50%">
      <misstionplanning :samplingPlanId="currentChooseId"/>
      <!-- <el-button @click="dialogVisible2 = true">再来一个</el-button> -->
      <!-- <el-dialog title="提示" :visible.sync="dialogVisible2" width="30%" append-to-body>
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
        </span>
      </el-dialog>-->
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>

    <samplingList :tableData="tableData" @RowClick="RowClickShowDialog"/>
  </div>
</template>

<script>
import samplingList from '@/components/list/samplingList.vue'
import misstionplanning from '@/views/sampling/Misstionplannig.vue'
export default {
  components: {
    samplingList,
    misstionplanning
  },
  data () {
    const data = {
      MissionName: '地表水监测',
      MissionCode: '201922828',
      Urgency: '1',
      MissionId: '0000-0000-0000-0000'
    }
    return {
      mode: 'assign',
      dialogVisible: false,
      dialogVisible2: false,
      currentChooseId: '',
      assignName: '未分配',
      search: '',
      type: '0',
      tableData: Array(20).fill(data)
    }
  },
  methods: {
    RowClickShowDialog (misstionId) {
      if (this.mode === 'assign') {
        this.currentChooseId = misstionId
        this.dialogVisible = true
      } else {
        this.$router.push()
      }
    },
    filterName () {
      this.$message(this.search)
    },
    handleCommand (val) {
      this.type = val
      if (val === '1') {
        this.assignName = '已分配'
      } else if (val === '0') this.assignName = '未分配'
      this.getTabledata()
    },
    getTabledata () {
      this.axios
        .get('/Sampling/GetAllProject', {
          params: {
            pageIndex: '1',
            pageSize: '50',
            type: this.type
          }
        })
        .then(e => {
          this.tableData = e.data
        })
    }
  },
  mounted () {
    this.getTabledata()
  }
}
</script>

<style lang="stylus" >
.leftDiv1
  width 300px
  height 100%
  float left
.upDiv
  height 20%
</style>
